<template>
<!--分学银行-->
  <div class="content">
    <headers></headers>
    <carousel></carousel>
    <div class="auto padding250">
      <p class="title">学分银行</p>
      <div class="container">
        <p class="clearfix font14" v-html="html">
        </p>
      </div>
    </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .content{
    background-color: #f5f5f5;
    text-align: left;
    .title{
      font-size: 20px;
      color: #000;
      margin: 20px 0 25px 0;
    }
    .container{
      background-color: #fff;
      padding: 50px 30px;
      p{
        line-height: 33px;
        /*font-size: 16px;*/
        color: #000;
        text-align: left;
        img{
          float: right;
        }
      }
    }

  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import {getHtmlWeb} from "../../http";

  export default {
        name: 'fenxue',
        props: {},
        data() {
            return {
              html:'',
              isSpinShow:false,
            };
        },
        methods: {},
        created() {
          if(this.isSpinShow === false) {
            this.isSpinShow = true;
            //获取页面信息
            getHtmlWeb({type: 'creditBank'}).then(res => {
              this.isSpinShow = false;
              this.html = res.data.html.htmlContent;
            })
          }
        },
        components: {
          headers,
          footers,
          carousel
        }
    }
</script>
